<template>
  <div class="home-header clearfix">
    <div class="left" @click="changeShowBar">
      <div class="icon">
        <img src="../../../static/img/lianxiren@3x.png" alt="">
      </div>
    </div>
    <div class="header-box" @click="changeType">
      <div id="1" :class="{onchoose :this.whichType === '1'}" class="header-item">
        <router-link :to="{ path: '/index'}" active-class="active">
          {{this.play}}
        </router-link>
      </div>
      <div id="2" :class="{onchoose :this.whichType === '2'}" class="header-item">
        <router-link :to="{ path: '/surePrice'}" active-class="active">
          {{this.cityCar}}
        </router-link>
      </div>
      <div id="3" :class="{onchoose :this.whichType === '3'}" class="header-item">{{this.nearCar}}</div>
      <div id="4" :class="{onchoose :this.whichType === '4'}" class="header-item">{{this.delivery}}</div>
    </div>
    <bar v-if="showBar"></bar>
  </div>
</template>

<script type="text/ecmascript-6">

// 引入这个页面需要的方法
import {mapMutations, mapGetters} from 'vuex'
import bar from 'base/home-bar/home-bar'
export default {
  data () {
    return {
      play: '接送机',
      cityCar: '一口价',
      nearCar: '城际专车',
      delivery: '跨城闪送',
      whichType: '1'
    }
  },
  computed: {
    ...mapGetters([
      'showBar'
    ])
  },
  methods: {
    // 点击切换上方导航的类型
    changeType (e) {
      this.whichType = e.target.id
    },
    // 点击的时候显示被左侧菜单
    changeShowBar () {
      const _this = this
      _this.setShowNavbar(true)
      setTimeout(function () {
        _this.setShowBar(true)
      }, 500)
    },
    ...mapMutations({
      setShowBar: 'SET_SHOWBAR',
      setShowNavbar: 'SET_SHOWNAVBAR'
    })
  },
  components: {
    bar
  }
}
</script>

<style  scoped lang="stylus" rel="stylesheet/stylus">
  .home-header
    position: fixed
    top: 0
    left: 0
    width: 100%
    height: 40px
    z-index: 99999999999
    background-color: #fff
    border-bottom: 2px solid #f4f4f4
    .left
      position: relative
      float: left
      width: 10%
      height: 40px
      box-sizing: border-box
    .header-box
      display: flex
      float: left
      width: 90%
      height: 40px
      .header-item
        width: 25%
        height: 40px
        box-sizing: border-box
        line-height: 40px
        font-size: 14px
        font-weight: 300
        color: rgb(153, 153, 153)
        .active
          color:#333
      .onchoose
        color: #000
    .right
      position: relative
      float: right
      width: 10%
      height: 40px
      box-sizing: border-box
    .icon
      position: absolute
      top: 50%
      margin-top: -6px
      left: 50%
      margin-left: -6px
      width: 12px
      height: 12px
      img
        width 100%
</style>